<template>
  <div class="globalDetails">
    <div class="container">
      <span class="setBtn"><el-button type="primary"
                   class="set-record"
                   @click="handleClick">设置记录</el-button></span>
      <!-- <div class="line"></div> -->
      <el-dialog title="记录"
                 width="800px"
                 :visible.sync="visible"
                 :close-on-click-modal="false">
        <Records :value="track" />
      </el-dialog>
      <el-form ref="ruleForm"
               class="fromStyle"
               inline>
        <p>送货时效设置</p>
        <div class="tips">
          本公司创建的订单送货时效遇周六、周日、法定节假日顺延至勾选日第二天(即该订单在勾选日第二天23点59分59秒前到达或签收,送货时效为达标);法定节日的优先级高于周六、周日。
        </div>
        <el-form-item>
          <div style="display: flex">
            <span style="margin-right: 10px">剔除</span>
            <el-checkbox-group v-model="checkoutList"
                               @change="changeStatus">
              <el-checkbox v-for="(item, index) in timeList"
                           :key="index"
                           :label="item.label"
                           border></el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="holiday">
            <span>节假日：</span>
            <el-checkbox v-model="festival"
                         label="法定节日"
                         @change="holiday = false"></el-checkbox>
            <el-checkbox v-show="festival"
                         v-model="holiday"
                         label="假日"></el-checkbox>
            <el-popover placement="bottom"
                        width="400"
                        trigger="hover">
              <div class="info-title">法定节假日说明：</div>
              <p>例如国庆节，国家规定10月1号、2号、3号为法定节日；10月4号、5号、6号、7号为假日</p>
              <ol class="info-style">
                <li>假日不能单独勾选，只能在法定节日勾选的情况下勾选</li>
                <li>节假日只勾选法定节日适用于部分收货方只休法定节日，假日为正常上班日</li>
              </ol>
              <div style="text-align: center">
                <img style="width: 300px"
                     src="@/static/images/date.png" />
              </div>
              <div slot="reference">
                <span class="example">(示例)
                  <i slot="reference"
                     class="iconcaozuoshuoming iconfont"
                     style="color: #ff6500"></i>
                </span>
              </div>
            </el-popover>
          </div>
        </el-form-item>
        <p>回单时效设置</p>
        <div class="tips">
          本公司创建的订单根据要求回单时效期间遇周六、周日、法定节假日将其剔除，往后顺延;法定节假日的优先级高于周六、周日。(回单时效一般从订单计划到达时间后开始算，订单实际回单时间在要求回单时效范围内为准时;平台的回单时效是10天,定制要求除外)
        </div>
        <el-form-item>
          <div style="display: flex">
            <span style="margin-right: 10px">剔除</span>
            <el-checkbox-group v-model="checkoutList2"
                               @change="changeStatus2">
              <el-checkbox v-for="(item, index) in timeList"
                           :key="index"
                           :label="item.label"
                           border></el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="holiday">
            <span>节假日：</span>
            <el-checkbox v-model="festival2"
                         label="法定节日"
                         @change="holiday2 = false"></el-checkbox>
            <el-checkbox v-show="festival2"
                         v-model="holiday2"
                         label="假日"></el-checkbox>
            <el-popover placement="bottom"
                        width="400"
                        trigger="hover">
              <div class="info-title">法定节假日说明：</div>
              <p>例如国庆节，国家规定10月1号、2号、3号为法定节日；10月4号、5号、6号、7号为假日</p>
              <ol class="info-style">
                <li>假日不能单独勾选，只能在法定节日勾选的情况下勾选</li>
                <li>节假日只勾选法定节日适用于部分收货方只休法定节日，假日为正常上班日</li>
              </ol>
              <div style="text-align: center">
                <img style="width: 300px"
                     src="@/static/images/date.png" />
              </div>
              <div slot="reference">
                <span class="example">(示例)
                  <i slot="reference"
                     class="iconcaozuoshuoming iconfont"
                     style="color: #ff6500"></i>
                </span>
              </div>
            </el-popover>
          </div>
        </el-form-item>
        <el-button type="primary"
                   class="btn-primary"
                   size="medium"
                   :loading="loading"
                   @click="handleSubmit">保存</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import Records from "@/components/track/Records";
import { consignee, track } from "@/api/index.js";

export default {
  name: 'GlobalDetails',
  components: { Records },
  data () {
    return {
      loading: false,
      timeList: [{ label: "周六", flag: false }, { label: "周日", flag: false }],
      checkoutList: [],
      checkoutList2: [],
      festival: false,
      holiday: false,
      festival2: false,
      holiday2: false,
      flagArr: [],
      flagArr2: [],
      smsSwitch: false,
      voiceSwitch: false,
      certPushSwitch: false,
      visible: false,
      config: {},
      track: [],
      userInfo: sessionStorage.getItem('userInfo')
    }
  },
  computed: {
    time () {
      return [].concat(this.flagArr, this.festival ? [1] : [], this.holiday ? [2] : [])
    },
    time2 () {
      return [].concat(this.flagArr2, this.festival2 ? [1] : [], this.holiday2 ? [2] : [])
    },
    user () {
      return JSON.parse(this.userInfo)
    },
    tenantId () {
      return this.user?.tenantId
    },
    userId () {
      return this.user?.userId
    }
  },
  created () {
    this.searchTenant();
  },
  methods: {
    handleClick () {
      this.visible = true
      this.selectRecord();
    },
    changeStatus () {
      this.timeList.forEach(item => {
        item.flag = this.checkoutList.some(item1 => item1 == item.label)
        if (item.flag) {
          if (item.label == '周六') {
            item.id = 6
          } else {
            item.id = 0
          }
        } else {
          delete item.id
        }
      })
      this.flagArr = this.timeList.map(item => item.id).filter(item1 => Boolean(item1) || item1 == 0)
    },
    changeStatus2 () {
      this.timeList.forEach(item => {
        item.flag = this.checkoutList2.some(item1 => item1 == item.label)
        if (item.flag) {
          if (item.label == '周六') {
            item.id = 6
          } else {
            item.id = 0
          }
        } else {
          delete item.id
        }
      })
      this.flagArr2 = this.timeList.map(item => item.id).filter(item1 => Boolean(item1) || item1 == 0)
    },
    handleSubmit: _.debounce(function () {    // 触发事件
      this.loading = true;
      this.save();
    }, 600),
    async save () {
      let params = {
        tenantId: this.tenantId,
        userId: this.userId,
        deliveryTime: this.time,
        receiptTime: this.time2
      };
      let { message, code } = await consignee.globalTimeliness(params)
        .catch(() => {
          this.loading = false;
        })
      if (code === 0) {
        this.loading = false;
        this.$message.success(message)
        this.searchTenant()
      }
    },
    async searchTenant () { // 查询租户拿deliveryTime送货时效/receiptTime收货时效    周六6 周日0 法定节日1 假日2
      let { data } = await consignee.searchTenant()
      this.config = data.config
      // if (this.config.deliveryTime && this.config.deliveryTime.length > 0 && this.config.receiptTime && this.config.receiptTime.length > 0) {
      this.checkoutList = []
      this.flagArr = []
      this.config.deliveryTime.forEach((item) => {
        if (item === 6) {
          this.checkoutList.push("周六");
          this.flagArr.push(6)
        } else if (item === 0) {
          this.checkoutList.push("周日");
          this.flagArr.push(0)
        } else if (item === 1) {
          this.festival = true
        } else if (item === 2) {
          this.holiday = true
        }
      });
      this.checkoutList2 = []
      this.flagArr2 = []
      this.config.receiptTime.forEach((item) => {
        if (item === 6) {
          this.checkoutList2.push("周六");
          this.flagArr2.push(6)
        } else if (item === 0) {
          this.checkoutList2.push("周日");
          this.flagArr2.push(0)
        } else if (item === 1) {
          this.festival2 = true
        } else if (item === 2) {
          this.holiday2 = true
        }
      });
      // }
    },
    async selectRecord () {
      if (!this.tenantId) return
      let type = 'tenantLimitTime'
      let { data } = await track.information(this.tenantId, type);
      data.map(item => {
        item.timestamp = item.message.slice(item.message.lastIndexOf('】') + 1)
        item.date = item.message.slice(0, item.message.lastIndexOf('】') + 1)
      })
      this.track = data
    }
  }
}
</script>
<style scoped>
.globalDetails {
  width: 100%;
  height: 100%;
}
.container {
  padding: 20px;
  margin-top: 12px;
  background: var(--prev-bg-white);
  height: calc(100vh - 150px);
  box-shadow: 0px 3px 6px rgb(35 35 35 / 16%);
}
.set-record {
  padding: 10px 20px;
}
.tips {
  background: #eeeeee;
  padding: 10px;
  margin: 10px 0 20px;
  border-radius: 5px;
  line-height: 20px;
  font-size: 14px;
}
.fromStyle {
  width: 820px;
  margin: 20px 0 0 38px;
}
.line {
  width: 100%;
  border-bottom: 4px solid var(--prev-icon-color-orange);
  margin-top: 15px;
}
.setBtn {
  display: flex;
  justify-content: right;
  padding-bottom: 8px;
  width: 100%;
  border-bottom: 4px solid var(--prev-icon-color-orange);
  margin-top: 15px;
}
.btn-primary {
  display: block;
  margin: 15px 0;
}
.holiday {
  display: flex;
  padding: 0 20px;
  border: 1px solid var(--prev-border-color-grey);
  line-height: 30px;
}
.holiday >>> .el-checkbox-group {
  display: flex;
  margin-right: 60px;
}
.holiday >>> .el-checkbox {
  margin-right: 8px;
}
.example {
  color: rgba(12, 128, 206);
  margin-left: 20px;
  cursor: pointer;
}
.el-checkbox-group >>> .el-checkbox.is-bordered.el-checkbox--small {
  padding: 5px 10px;
  margin-right: 5px;
}
</style>